<style>
    div {
        position:relative;
        width:200px;
        height:90px;
        padding:0;
        background: transparent no-repeat scroll 0 0/100% auto;
        border-radius:1.2vh;
        color:rgba(255,255,255,.9);
        overflow:hidden;
        box-shadow:0 0 3px 0 rgba(0,0,0,.3) inset,0 0 2px 0 #000;
        background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488629367747&di=029a65df61a10f7452775fabfed12c9b&imgtype=0&src=http%3A%2F%2Fwww.th7.cn%2Fd%2Ffile%2Fp%2F2016%2F02%2F22%2F976f9a96f4df8dd325aaea45f89f8c51.jpg);
    }
    div.display-loading-layer {
        -webkit-animation:display-loading-layer .6s linear;
    }
    div.display-loading-layer::after {
        display:none;
    }
    div::after {
        position:absolute;
        left:70%;
        content:"";
        height:3vh;
        width:2.5vh;
        background:inherit;
        background-size:100% 80%;
        background-position:50%;
        -webkit-transform:rotate(180deg);
        -moz-transform:rotate(180deg);
        transform:rotate(180deg);
        border-radius:80% 80% 120% 120%;
        box-sizing:border-box;
        box-shadow:0 0 3px 1px rgba(0,0,0,.3) inset,0 1px 3px 1px #555;
        -webkit-filter:brightness(.9);
        -moz-filter:brightness(.9);
        filter:brightness(.9);
        -webkit-animation:rain-drop 6s linear infinite;
        -moz-animation:rain-drop 6s linear infinite;
        animation:rain-drop 6s linear infinite;
        z-index:50;
    }
    div::before {
        position:absolute;
        content:"";
        top:0;
        left:0;
        height:100%;
        width:100%;
        border-radius:inherit;
        background:rgba(0,0,0,.4);
        z-index:100;
    }
    span {
        opacity:0;
        position:absolute;
        letter-spacing:.1em;
        word-spacing:.1em;
        font-weight:bolder;
        z-index:120;
    }
    div>span:first-child {
        top:15%;
        left:18%;
    }
    div>span:last-child {
        top:55%;
        right:18%;
    }
    div.loaded>span {
        opacity:.9;
    }
    div.loading>span {
        opacity:0;
    }
    div.loaded>span:first-child {
        -webkit-animation:tip-flash 4s linear infinite;
    }
    div.loaded>span:last-child {
        -webkit-animation:tip-flash 4s linear infinite 2s;
    }
    div.loading>span:first-child {
        -webkit-animation:tip-show 5s linear;
    }
    div.loading>span:last-child {
        -webkit-animation:tip-show 3s linear 2s;
    }
    @keyframes rain-drop {
        from {
        top:-110%;
    }
    10% {
        top:7%;
        left:71%;
    }
    30% {
        top:7%;
        left:71%;
    }
    35% {
        top:12%;
        left:71%;
    }
    38% {
        top:60%;
        left:70%;
    }
    60% {
        top:65%;
    }
    80% {
        top:65%;
    }
    85% {
        top:90%;
    }
    to {
        top:100%;
    }
    }@keyframes tip-show {
        from {
        opacity:0;
    }
    to {
        opacity:1;
    }
    }@keyframes tip-flash {
        from {
        opacity:1;
    }
    50% {
        opacity:.1;
    }
    to {
        opacity:1;
    }
    }@keyframes display-loading-layer {
        from {
        height:0px;
    }
    to {
        height:90px;
    }
    }
</style>

<div class="display-loading-layer">
    <span>正在加载...</span>
    <span>请稍等~~</span>
</div>

<script>
    HTMLElement.prototype.toggleClass = function(lclsname, rclsname) {
        if (!lclsname || typeof lclsname != 'string') return;
        var spcode = '\u0020',
        oclsname = this.className.split(spcode);

        if (!rclsname) if (oclsname.indexOf(lclsname) != -1) this.className = oclsname.filter(function(v) {
            if (v != lclsname) return v;
        }).join(spcode).trim();
        else this.className = oclsname.concat(lclsname).join(spcode).trim();
        else if (oclsname.indexOf(rclsname) != -1) return;
        this.className = (oclsname = oclsname.filter(function(v) {
            if (v != lclsname) return v;
        })) ? (oclsname.push(rclsname) ? oclsname.join(spcode) : null) : null;
    }

    a = document.getElementsByTagName('div')[0];
    a.addEventListener('animationend',
    function(e) {
        e.stopPropagation();
        e.cancelBubble = true;
        if (!a.firsted) {
            a.firsted = 1;
            a.toggleClass('display-loading-layer', 'loading');
        } else {
            a.toggleClass('loading', 'loaded');
        }
    },
    false);
</script>